import React from 'react';
import ReactDOM from 'react-dom';
import Protect from './protect'
// import Home from './home'
// import About from './about'
import Login from './login'
import { Route, HashRouter, NavLink } from 'react-router-dom';
const Home = React.lazy(() => import(/* webpackChunkName:"home"*/'./home'))
const About = React.lazy(() => import(/* webpackChunkName:"about"*/'./about'))
console.log(() => import(/* webpackChunkName:"home"*/'./home'))
let obj = {
  '/home': Home,
  '/about': About
}
let routeAry = [
  {
    path: '/home',
    meta: { qq: 123 },
    url: './home'
  },
  {
    path: '/about',
    meta: { qq: 123 },
    url: './about'
  }
]

class App extends React.Component {

  render() {
    return <div className=''>
      <NavLink to='/home'>首页</NavLink>
      <NavLink to='/about'>关于页</NavLink>
      {/* <Protect path='/home' component={Home} className='box' level={1}></Protect>
      <Protect path='/about' component={About} level={3}></Protect> */}
      <React.Suspense fallback={<h3>加载中</h3>}>
        {
          routeAry.map(item => {
            return <Protect key={item.path} path={item.path} component={obj[item.path]} level={0}></Protect>
            // return <Protect
            //   key={item.path}
            //   path={item.path}
            //   component={item.component} level={0}></Protect>
          })
        }
      </React.Suspense>
      <Route path='/login' component={Login}></Route>
    </div>;
  }
}

ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'))